<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>EasyUI 自适应缺陷</title>
    <link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="themes/icon.css">
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery.easyui.min.js"></script>
    <style>
        html,
        body {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .easyui-layout {
            margin: 0 auto;
        }

        .bro-ele {
            text-align: right;
        }
        .fit-layout {
            border: solid royalblue;
            margin-top: 50px;
        }
    </style>
</head>

<body>
    <div class="easyui-layout" style="width:700px;height:350px;">
        <div data-options="region:'center',iconCls:'icon-ok'" title="Center" style="padding:5px">
            <div class="bro-ele">兄弟元素</div>
            <div class="easyui-layout fit-layout" data-options="fit:true">
            </div>
        </div>
    </div>

</body>

</html>